{% extends "base.html" %}

{% block title %}本地资源 - SkitPanel 短剧管理面板{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/local_resources.css') }}">
{% endblock %}

{% block content %}
    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">
        
        <!-- 刮削信息模态框 -->
        <div id="scrape-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-xl shadow-2xl w-full max-w-md p-6 transform transition-all">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-semibold text-dark">选择刮削名称来源</h3>
                    <button id="close-scrape-modal" class="text-gray-500 hover:text-gray-700 transition-colors">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                
                <div class="mb-4">
                    <p class="text-gray-600 mb-3">请选择刮削名称的来源：</p>
                    
                    <div class="space-y-3">
                        <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                            <input type="radio" name="scrape-source" value="folder-name" class="mr-3 text-primary" checked>
                            <span>使用文件夹名称</span>
                        </label>
                        
                        <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                            <input type="radio" name="scrape-source" value="file-name" class="mr-3 text-primary">
                            <span>使用文件名称</span>
                        </label>
                        
                        <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                            <input type="radio" name="scrape-source" value="custom-name" class="mr-3 text-primary">
                            <span>自定义名称</span>
                        </label>
                    </div>
                </div>
                
                <div id="custom-name-container" class="mb-6 hidden">
                    <label for="custom-movie-name" class="block text-sm font-medium text-gray-700 mb-1">请输入自定义名称：</label>
                    <input type="text" id="custom-movie-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                </div>
                
                <div class="flex gap-3">
                    <button id="cancel-scrape" class="flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                        取消
                    </button>
                    <button id="confirm-scrape" class="flex-1 py-2 px-4 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                        确认刮削
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 刮削方式选择模态框 -->
        <div id="scrape-method-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-xl shadow-2xl w-full max-w-md p-6 transform transition-all">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-semibold text-dark">选择刮削方式</h3>
                    <button id="close-method-modal" class="text-gray-500 hover:text-gray-700 transition-colors">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                
                <div class="mb-6">
                    <p class="text-gray-600 mb-3">请选择刮削数据源：</p>
                    
                    <div class="space-y-3">
                        <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                            <input type="radio" name="scrape-method" value="douban" class="mr-3 text-primary" checked>
                            <span>豆瓣</span>
                        </label>
                        
                        <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                            <input type="radio" name="scrape-method" value="tmdb" class="mr-3 text-primary">
                            <span>TMDB</span>
                        </label>
                        
                        <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                            <input type="radio" name="scrape-method" value="madouqu" class="mr-3 text-primary">
                            <span>国产刮削</span>
                        </label>
                        
                        <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                            <input type="radio" name="scrape-method" value="javdb" class="mr-3 text-primary">
                            <span>其他刮削</span>
                        </label>
                    </div>
                    
                    <!-- TMDB媒体类型选择 -->
                    <div id="tmdb-media-type-container" class="mt-4 pt-4 border-t border-gray-200 hidden">
                        <p class="text-gray-600 mb-3">请选择媒体类型：</p>
                        
                        <div class="space-y-3">
                            <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                <input type="radio" name="tmdb-media-type" value="movie" class="mr-3 text-primary" checked>
                                <span>电影</span>
                            </label>
                            
                            <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                <input type="radio" name="tmdb-media-type" value="tv" class="mr-3 text-primary">
                                <span>电视节目</span>
                            </label>
                        </div>
                    </div>
                </div>
                
                <div class="flex gap-3">
                    <button id="cancel-method" class="flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                        取消
                    </button>
                    <button id="confirm-method" class="flex-1 py-2 px-4 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                        确认选择
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 搜索结果模态框 -->
        <div id="search-results-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl p-6 transform transition-all max-h-[90vh] overflow-auto">
                <div class="flex justify-between items-center mb-4 sticky top-0 bg-white z-10">
                    <h3 class="text-xl font-semibold text-dark">搜索结果</h3>
                    <button id="close-results-modal" class="text-gray-500 hover:text-gray-700 transition-colors">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                
                <div id="search-results-container" class="space-y-4">
                    <!-- 搜索结果将通过JS动态添加 -->
                </div>
            </div>
        </div>
        
        <!-- 资源详情模态框 -->
        <div id="resource-detail-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl p-6 transform transition-all max-h-[90vh] overflow-auto">
                <div class="flex justify-between items-center mb-6 sticky top-0 bg-white z-10">
                    <h3 class="text-xl font-semibold text-dark">资源详情</h3>
                    <button id="close-detail-modal" class="text-gray-500 hover:text-gray-700 transition-colors">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                
                <div id="resource-detail-content" class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- 左侧海报 -->
                    <div class="md:col-span-1">
                        <div id="poster-container" class="aspect-[2/3] bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center">
                            <!-- 海报将通过JS动态添加 -->
                        </div>
                    </div>
                    
                    <!-- 右侧信息 -->
                    <div class="md:col-span-2 space-y-4">
                        <div id="detail-title" class="text-2xl font-bold"></div>
                        <div id="detail-info" class="space-y-2 text-gray-700"></div>
                        <div id="detail-overview" class="text-gray-600"></div>
                        
                        <div class="pt-4">
                            <button id="generate-nfo-btn" class="py-2 px-6 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                生成NFO文件
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 刮削进度模态框 -->
        <div id="scrape-progress-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-xl shadow-2xl w-full max-w-md p-6 transform transition-all">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-semibold text-dark">刮削进度</h3>
                </div>
                
                <div class="space-y-4 mb-6">
                    <div class="flex justify-between items-center">
                        <span>生成NFO文件</span>
                        <span id="nfo-status" class="text-gray-500"><i class="fa fa-spinner fa-spin"></i> 进行中</span>
                    </div>
                    
                    <div class="flex justify-between items-center">
                        <span>保存封面图片</span>
                        <span id="poster-status" class="text-gray-500"><i class="fa fa-spinner fa-spin"></i> 进行中</span>
                    </div>
                    
                    <div class="flex justify-between items-center">
                        <span>创建文件夹</span>
                        <span id="folder-status" class="text-gray-500"><i class="fa fa-spinner fa-spin"></i> 进行中</span>
                    </div>
                    
                    <div class="flex justify-between items-center">
                        <span>整理资源文件</span>
                        <span id="organize-status" class="text-gray-500"><i class="fa fa-spinner fa-spin"></i> 进行中</span>
                    </div>
                </div>
                
                <div class="text-center text-gray-600" id="overall-status">
                    <p>刮削进行中，请稍候...</p>
                </div>
            </div>
        </div>
        <!-- 搜索和筛选区域 -->
        <section class="mb-10">
            <div class="bg-white rounded-xl shadow-lg p-6 card-shadow">
                <h2 class="text-xl font-semibold mb-4 text-dark flex items-center">
                    <i class="fa fa-folder-open mr-2 text-primary"></i>
                    本地资源管理
                </h2>
                
                <div class="flex flex-col md:flex-row gap-4 mb-6">
                    <div class="flex-grow">
                        <label for="resource-search" class="block text-sm font-medium text-gray-700 mb-1">搜索短剧名称</label>
                        <div class="relative">
                            <input 
                                type="text" 
                                id="resource-search" 
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                                placeholder="请输入短剧名称..."
                            >
                            <div class="absolute right-3 top-1/2 transform -translate-y-1/2">
                                <i class="fa fa-search text-gray-400"></i>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col justify-end">
                        <button id="refresh-btn" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-all flex items-center justify-center card-shadow">
                            <i class="fa fa-refresh mr-2"></i>
                            刷新资源
                        </button>
                    </div>
                </div>
                
                <!-- 过滤选项 -->
                <div class="flex flex-wrap gap-4 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">资源类型</label>
                        <select id="resource-type" class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                            <option value="all">全部</option>
                            <option value="file">单个文件</option>
                            <option value="folder">文件夹</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">排序方式</label>
                        <select id="sort-option" class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                            <option value="name-asc">名称升序</option>
                            <option value="name-desc">名称降序</option>
                            <option value="date-asc">修改日期升序</option>
                            <option value="date-desc">修改日期降序</option>
                        </select>
                    </div>
                </div>
            </div>
        </section>

        <!-- 资源列表区域 -->
        <section class="mb-10">
            <div class="bg-white rounded-xl shadow-lg p-6 card-shadow">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold text-dark flex items-center">
                        <i class="fa fa-list mr-2 text-primary"></i>
                        资源列表
                    </h2>
                    <button id="go-up-btn" class="text-gray-600 hover:text-primary transition-colors px-3 py-1 rounded-lg border border-gray-200 hover:bg-gray-50 hidden">
                        <i class="fa fa-arrow-up"></i> 返回上一级
                    </button>
                </div>
                
                <!-- 资源表格 -->
                <div class="overflow-x-auto">
                    <table id="resources-table" class="w-full text-left">
            <thead>
                <tr class="bg-gray-50 border-b">
                    <th class="py-3 px-4 font-medium text-gray-700">资源名称</th>
                    <th class="py-3 px-4 font-medium text-gray-700">类型</th>
                    <th class="py-3 px-4 font-medium text-gray-700">大小</th>
                    <th class="py-3 px-4 font-medium text-gray-700 text-center">是否有封面</th>
                    <th class="py-3 px-4 font-medium text-gray-700 text-center">是否有媒体信息</th>
                    <th class="py-3 px-4 font-medium text-gray-700 text-center">是否有媒体文件</th>
                    <th class="py-3 px-4 font-medium text-gray-700 text-center">是否已刮削</th>
                    <th class="py-3 px-4 font-medium text-gray-700">操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 资源项将通过JS动态添加 -->
                <tr>
                    <td colspan="8" class="text-center p-8 text-gray-500">
                        <i class="fa fa-film text-4xl mb-2"></i>
                        <p>点击"刷新资源"按钮加载本地短剧</p>
                    </td>
                </tr>
            </tbody>
        </table>
                </div>
            </div>
        </section>
    </main>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='js/local_resources.js') }}"></script>
{% endblock %}